<!-- 管理员用户管理主界面 -->


<template>
  <div>
  <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <br><br>
      <el-form-item label="用户名" class="game-label">
        
        <el-input v-model="searchForm.name" placeholder="账户名">





        </el-input>
      </el-form-item>


      <el-form-item label="性别" class="game-label">

        <el-input v-model="searchForm.gender" placeholder="性别"></el-input>

      </el-form-item>




      <el-form-item>
        <el-button type="warning" @click="onSubmit()">搜索</el-button>
      </el-form-item>

      <el-button type="info" @click="clear">清空</el-button>


      <el-form-item>
        <el-button type="primary" @click="add()" style="margin-left: 1050px">新增用户</el-button>
      </el-form-item>


    </el-form>



     <!-- 用户信息表 -->

    <div class="table-container">
    <el-table :data="tableData" style="width: 100%; " border>
      <el-table-column prop="name" label="用户名" width="180"> </el-table-column>
      

      <el-table-column  label="用户图片">
        <template v-slot="scope" >
          <!-- <el-image
            style="width: 140px; height: 100px; border-radius: 0%"
            :src="'http://47.99.51.143:9000/files/' + scope.row.game_image"
            :preview-src-list="['http://47.99.51.143:9000/files/' + scope.row.game_image]"
          ></el-image> -->


          <div style="position: relative; display: inline-block;">
            <el-image
              style="width: 140px; height: 100px; border-radius: 0%"
            :src="'http://47.99.51.143:9000/files/' + scope.row.image"
            ></el-image>
            
            
            <!-- <i
            
              v-if="scope.row.game_id == 1"
              @click="change(scope.row.id),jinshi(scope.row.game_id)"
             
              class="el-icon-star-on"
              style="position: absolute; top: 5px; right: 5px; font-size: 20px; color: #f90; cursor: pointer;"
            ></i>
            <i
              v-else
              @click="change(scope.row.id),jinshi(scope.row.game_id)"
              alert="取消收藏成功"
              class="el-icon-star-off"
              style="position: absolute; top: 5px; right: 5px; font-size: 20px; color: #f90; cursor: pointer;"
            ></i>
          -->
          </div>
          
        </template>
        
          
          
       
      </el-table-column>

      
     <!--  <div>
        <i class="icon" :class="isOn ? 'el-icon-star-on' : 'el-icon-star-off'" @click="toggleIcon"></i>
        
      </div> -->






      
      
      

      <el-table-column prop="gender" label="性别" width="140">
        <!-- <template slot-scope="scope">
          {{ scope.row.gender == 1 ? '男' : '女' }}
        </template> -->
      </el-table-column>

      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">

          <!-- <el-button type="primary" size="medium"> <router-link to="/shop"
              style="text-decoration:none">详情页</router-link></el-button> -->

         <!--  <el-button size="mini" @click="handleDelete(scope.row.id)">删除</el-button> -->
           
         
          <el-popconfirm
           confirm-button-text='好的'
          cancel-button-text='不用了'
          icon="el-icon-info"
          icon-color="red"
          title="这是一段内容确定删除吗？"
          @confirm="handleDelete(scope.row.id)"
        >
          <el-button slot="reference" type="danger" >删除</el-button>
        </el-popconfirm>
      



          &nbsp;&nbsp;
          <el-button type="primary" size="medium"  @click="userEdit(scope.row)">编辑</el-button>

          <br><br>
          <el-popconfirm
           confirm-button-text='好的'
          cancel-button-text='不用了'
          icon="el-icon-info"
          icon-color="red"
          title="确定重置密码吗？"
          @confirm="resetPassword(scope.row.id)"
        >
          <el-button slot="reference" type="warning" >重置密码</el-button>
        </el-popconfirm>

        



        </template>
      </el-table-column>

    </el-table>
    </div>

  <!--  用户信息修改 -->
    <el-dialog title="用户信息修改"   draggable :visible.sync="userFormVisible" >
      <el-form :model="form">
        <el-form-item label="账户名" prop="name" label-width="15%">
      <el-input
      v-model="form.name"
      autocomplete="off"
      > </el-input></el-form-item>

      <el-form-item label="昵称" prop="pet" label-width="15%">
        <el-input 
        v-model="form.pet"
        autocomplete="off"
        > </el-input></el-form-item>




        <!-- <el-form-item label="头像" label-width="15%">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            action="http://47.99.51.143:9000/files/upload"
            :on-success="successUserUpload"
          
            style="float: left; margin-left: 20px"
          >
          <img v-if="userform.image" :src="'http://47.99.51.143:9000/files' + userform.image" class="avatar">

           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           

            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item> -->


        <el-form-item label="头像" >
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            action="http://47.99.51.143:9000/files/upload"
            
            :on-success="successUserUpload"
            style="float: left; margin-left: 20px"
          >
          <img v-if="form.image" :src="'http://47.99.51.143:9000/files/' + form.image" class="avatar">
  
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           
  
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>




        
        






       <!--  <el-form-item label="性别" prop="gender" label-width="15%">
          <el-input 
          v-model="userform.gender"
          autocomplete="off"
          >  </el-input></el-form-item> -->


          <el-form-item label="性别" prop="gender" label-width="15%">
            <el-select v-model="form.gender" placeholder="请选择" style="width:100%" >
               <el-option
                v-for="item in genderList"
                :key="item.value"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>

          <span style="color: red;margin-left: 110px">注意：1---代表管理员&nbsp;&nbsp;2---代表普通用户&nbsp;&nbsp;3---代表商家&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请谨慎操作！</span>
          <el-form-item label="权限" prop="role" label-width="15%">
            <el-select v-model="form.role" placeholder="请选择" style="width:100%" >
               <el-option
                v-for="item in roleList"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
         




          <el-form-item label="手机号" prop="phone" label-width="15%">
            <el-input 
            v-model="form.phone"
            autocomplete="off"
            > </el-input></el-form-item>
           
            <el-form-item label="邮箱" prop="email" label-width="15%">
              <el-input 
              v-model="form.email"
              autocomplete="off"
              > </el-input></el-form-item>



              
      </el-form>





      <div slot="footer" class="dialog-footer">
        <el-button @click="userFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeSubmit()">确 定</el-button>
      </div>
    </el-dialog>




    <!--  用户信息新增 -->
    <el-dialog title="用户信息新增"   draggable :visible.sync="FormVisible" >
      <el-form :model="form">
        <el-form-item label="账户名" prop="name" label-width="15%">
      <el-input
      v-model="form.name"
      autocomplete="off"
      > </el-input></el-form-item>

      <el-form-item label="昵称" prop="pet" label-width="15%">
        <el-input 
        v-model="form.pet"
        autocomplete="off"
        > </el-input></el-form-item>

        <span style="color: red;margin-left: 110px">注意：1---代表管理员&nbsp;&nbsp;2---代表普通用户&nbsp;&nbsp;3---代表商家&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请谨慎操作！</span>
          <el-form-item label="权限" prop="role" label-width="15%">
            <el-select v-model="form.role" placeholder="请选择" style="width:100%" >
               <el-option
                v-for="item in roleList"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="密码" prop="password" label-width="15%">
            <el-input 
            v-model="form.password"
            autocomplete="off"
            > </el-input>
            </el-form-item>




        <!-- <el-form-item label="头像" label-width="15%">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            action="http://47.99.51.143:9000/files/upload"
            :on-success="successUserUpload"
          
            style="float: left; margin-left: 20px"
          >
          <img v-if="userform.image" :src="'http://47.99.51.143:9000/files' + userform.image" class="avatar">

           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           

            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item> -->


        <el-form-item label="头像" >
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            action="http://47.99.51.143:9000/files/upload"
            
            :on-success="successUserUpload"
            style="float: left; margin-left: 20px"
          >
          <img v-if="form.image" :src="'http://47.99.51.143:9000/files/' + form.image" class="avatar">
  
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           
  
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>



      




        
        






       <!--  <el-form-item label="性别" prop="gender" label-width="15%">
          <el-input 
          v-model="userform.gender"
          autocomplete="off"
          >  </el-input></el-form-item> -->


          <el-form-item label="性别" prop="gender" label-width="15%">
            <el-select v-model="form.gender" placeholder="请选择" style="width:100%" >
               <el-option
                v-for="item in genderList"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>


          <el-form-item label="手机号" prop="phone" label-width="15%">
            <el-input 
            v-model="form.phone"
            autocomplete="off"
            > </el-input></el-form-item>
           
            <el-form-item label="邮箱" prop="email" label-width="15%">
              <el-input 
              v-model="form.email"
              autocomplete="off"
              > </el-input></el-form-item>



              
      </el-form>





      <div slot="footer" class="dialog-footer">
        <el-button @click="FormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser()">确 定</el-button>
      </div>
    </el-dialog>
    
      

  </div>

</template>





<script>
import request from '@/request/request.js';


export default {
  data() {
    return {
      wordFlag: false,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      background: true,
      // 每页显示的条数
      pageSize: 5,
      // 总记录数
      totalCount: 100,
      // 当前页码
      currentPage: 1,
      dialogFormVisible: false,
      FormVisible: false,
      form: {},
      userFormVisible: false,
      userform: {
        image: "",
      },
      tableData: [],
      genderList: [{ id: 1, name: "男" }, { id: 2, name: "女" }],
      roleList: [{ id: 1, name: "1---代表管理员" }, { id: 2, name: "2---代表普通用户" }, { id: 3, name: "3---代表商家" }],
      searchForm: {
        name: "",
        gender: "",
      },
      release_date: ""
    };
  },
  methods: {

    /* change(id){
  request.get("/games/change/" + id).then((res) => {
    if (res.code === "0") {
      
      this.load();
    } else {
      
    }
  });
  }, 
  jinshi(id){
  if(id==0){
    this.$message({ message: "已收藏", type: "success" });
  }else{
    this.$message({ message: "取消收藏", type: "error" });
  }
  }, */
    /*  userEdit(){
       request.get("/user/" + this.user.id).then((res) => {
         if (res.code === "0") {
           this.userform = res.data;
           this.user=res.data;
           localStorage.setItem("user", JSON.stringify(res.data));
           this.userFormVisible = true;
         }
       })
     }, */
    resetPassword(id) {
      request.put("/user/resetpwd/" + id).then((res) => {
        if (res.code === "0") {
          this.$message.success({ message: "重置密码成功", type: "success" });
        } else {
          this.$message({ message: "重置密码失败", type: "error" });
        }
      });

    },
    userEdit(obj) {
      this.form = obj;
      this.userFormVisible = true;
    },
    /*   successUpload(res) {
        console.log(res);
        this.form.game_image = res.data;
      }, */
    successUserUpload(res, file) {
      console.log(res);
      console.log(file);
      this.form.image = res.data;
      /* this.user.image = res.data;
      localStorage.setItem("user", JSON.stringify(this.user)); */
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    add() {
      this.form = {};
      this.FormVisible = true;
    },
    /* userSubmit() {
      request.post("/user", this.userform).then((res) => {
        if (res.code === "0") {
          this.$message.success({ message: "修改成功", type: "success" });
          //更新本地缓存
          
          this.userFormVisible = false;
          this.load();
        } else {
          this.$message({ message: "修改失败", type: "error" });
        }
      });
    }, */
    addUser() {
      request.post("/user/register", this.form).then((res) => {
        if (res.code === "0") {
          this.$message.success({ message: "新增成功", type: "success" });
          this.FormVisible = false;
          this.load();
        } else {
          this.$message({ message: "新增失败", type: "error" });
        }
      });
    },
    changeSubmit() {
      request.post("/user", this.form).then((res) => {
        if (res.code === "0") {
          this.$message.success({ message: "修改成功", type: "success" });
          this.userFormVisible = false;
          this.load();
        } else {
          this.$message({ message: "修改失败", type: "error" });
        }
      });

    },
    handleDelete(id) {
      request.delete("/user/" + id).then((res) => {
        if (res.code === "0") {
          this.$message.success({ message: "删除成功", type: "success" });
          this.load();
        } else {
          this.$message({ message: "删除失败", type: "error" });
        }
      });
    },
    viewDetails(id) {
      alert("查看详情：" + id);
      // 可以根据 id 加载对应游戏的详情页
    },
    clear() {
      this.searchForm = { name: "", gender: "" };
      this.load();

      this.page();
    },
    onSubmit() {
      request.get("/user/search", { params: this.searchForm }).then((res) => {
        if (res.code === "0") {
          this.tableData = res.data;
        } else {
          this.$message({ message: "查询失败", type: "error" });
        }
      });
    },
    handleSizeChange(val) {
      alert("每页记录数发生变化" + val);
    },
    handleCurrentChange(val) {
      alert("页码发生变化" + val);
    },
    load() {
      request.get("/user/list").then((res) => {
        if (res.code === "0") {
          this.tableData = res.data;
        } else {
          alert(res.msg);
        }
      });
    }
  },
  created() {
    this.load();

  },
  mounted() {
    // 页面加载完成后，开始动画
    setTimeout(() => {
      this.wordFlag = true
    }, 200)
  },
  computed: {

  }
};
</script>












